<template>
  <view class="editSeal">
    <view class="bg-color">
      <u--form
          labelPosition="left"
          :model="sealForm.data"
          :rules="sealForm.rule"
          ref="sealFormRef"
      >
        <u-form-item
            required
            label="印章名称"
            prop="title"
            borderBottom
            labelWidth='70'
        >
          <u--input
              placeholder="请输入印章名称"
              v-model="sealForm.data.title"
              border="none"
          ></u--input>
        </u-form-item>
        <u-form-item
            required
            label="印章简介"
            prop="summary"
            borderBottom
            labelWidth='70'
        >
          <u--input
              placeholder="请输入印章简介"
              v-model="sealForm.data.summary"
              border="none"
          ></u--input>
        </u-form-item>
      </u--form>
    </view>
    <view class="flex button">
      <u-button type="primary" text="确定" class="custom-style" @click="sealForm.submit"></u-button>
    </view>

  </view>
</template>

<script setup>
import {addSeal} from "../../../../api/module/mine.js";
import {reactive, ref} from "vue"
import {goNav, pageUrl} from "../../../../utils/common";

const sealFormRef = ref(null);
const sealForm = reactive({
  data: {
    title: '',
    summary: '',
  },
  rule: {
    title: [
      {required: true, message: '请输入印证名称', trigger: 'blur'}
    ],
    summary: [
      {required: true, message: '请输入简介', trigger: 'blur'}
    ]
  },
  submit: function () {
    sealFormRef.value.validate().then(validate => {
      if (validate) {
        addSeal(sealForm.data).then(res => {
          goNav(`${pageUrl.sealListUrl[2]}`)
        })
      }
    });
  }
});

</script>

<style scoped lang="scss">
.editSeal {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 226rpx;
  align-items: center;

  .bg-color {
    width: 100%;
    background: #fff;
    padding: 0 32rpx;
    box-sizing: border-box;
  }

  .button {
    width: 520rpx;
    height: 80rpx;
  }

}

</style>